<template>
	<view class="container">
		<view class="portraitArea" @click="selectAndModifyPhoto()">
			<view class="imgContent">
				<image :src="wxUserInfo.wxUserAvatar" mode="aspectFill"></image>
			</view>
			<view class="textContent">
				更换头像
			</view>
		</view>

		<view class="infoFill">
			<view class="inputContent">
				<input type="text" class="name" placeholder="修改昵称" v-model="wxUserInfo.wxUsername" />
			</view>

			<view class="inputContent">
				
					<uni-forms-item name="hobby2">
						<hpy-form-select :dataList="sexList" text="text" :hideBorder="true" :hideArrow="true"
							v-model="wxUserInfo.wxUserSex"
							:title="wxUserInfo.wxUserSex===null||wxUserInfo.wxUserSex===''?'性别选择':wxUserInfo.wxUserSex" />
					</uni-forms-item>
			

			</view>

			<view class="inputContent">
				<input type="number" placeholder="年龄选择(选填)" v-model="wxUserInfo.wxUserAge" />
			</view>

			<view class="inputContent">
				<input type="number" placeholder="手机号(选填)" v-model="wxUserInfo.wxUserTel" />
			</view>



		</view>

		<view class="confirmIcon" @click="submitInfo()">
			<image src="https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/my/popup_icon_success_disabled%404x.png" mode="aspectFill"></image>
		</view>
	</view>
</template>

<script>
	import CommonApi from '@/api/common/upLoad.js'
	import * as userApi from '@/api/my/my.js'
	export default {
		data() {
			return {
				//配置的性别选择器
				sexList: [{
					text: '男',
				}, {
					text: '女',
				}],

				wxUserInfo: {
					wxUserAvatar: '',
					wxUsername: '',
					wxUserSex: '',
					wxUserAge: '',
					wxUserTel: ''

				},


			}
		},
		onLoad() {
			this.getUserInfo();
		},
		methods: {
			//打开个人信息页面调用getInfo进行数据回显
			async getUserInfo() {
				try {
					const res = await userApi.getInfo();
					const userInfo = res.data.data;
					if (userInfo != null) {
						// 遍历 wxUserInfo 的键
						Object.keys(this.wxUserInfo).forEach(key => {
							if (userInfo.hasOwnProperty(key)) {
								// 如果 userInfo 有相同的键，则更新 wxUserInfo
								this.wxUserInfo[key] = userInfo[key];
							}
						});
						if(this.wxUserInfo.wxUserAge===0){
							this.wxUserInfo.wxUserAge='';
						}
					}

				} catch (err) {
					return uni.$showMsg('获取用户信息失败')
				}
			},


			// 使用 async/await 修改 selectAndModifyPhoto 方法
			async selectAndModifyPhoto() {

				try {
					const url = await uni.$chooseImage();
					this.wxUserInfo.wxUserAvatar = url || this.wxUserInfo.wxUserAvatar

				} finally {
					uni.hideLoading(); // 完成后隐藏加载提示
				}
			},


			//提交更新的个人信息
			async submitInfo() {

				if (!this.wxUserInfo.wxUsername || this.wxUserInfo.wxUsername.trim() === '') {
					uni.showToast({
						title: '用户名不能为空',
						icon: 'none'
					});
					return; // 停止执行
				}else if(this.wxUserInfo.wxUsername.length>10){
					return uni.$showMsg('用户名长度应小于10')
				}
				   
				
				// 校验年龄（正整数）
				
					if (!/^[1-9]\d*$/.test(this.wxUserInfo.wxUserAge)&&this.wxUserInfo.wxUserAge!==null&&this.wxUserInfo.wxUserAge!=='') {
						uni.showToast({
							title: '年龄必须是正整数',
							icon: 'none'
						});
						return; // 停止执行
					}
				
				

				// 校验手机号（中国大陆11位手机号）
				
					if (!/^1[3-9]\d{9}$/.test(this.wxUserInfo.wxUserTel)&&this.wxUserInfo.wxUserTel!==null&&this.wxUserInfo.wxUserTel!=='') {
						uni.showToast({
							title: '请输入有效的手机号码',
							icon: 'none'
						});
						return; // 停止执行
					}
				
				

				
				const res = await userApi.updateInfo(this.wxUserInfo);
				
				if (res.data.code === 200) {
					uni.$showMsg("修改个人信息成功")
					//跳转回个人中心
					uni.$toPage('/pages/my/my')
				} else {
					return uni.$showMsg("修改信息失败")
				}
			}



		}
	}
</script>


<style lang="scss">
	.container {
		width: 100vw;
		height: 100vh;
		background: rgba(255, 255, 255, 1);
		display: flex;
		flex-direction: column;

		.portraitArea {
			margin-top: 38rpx;
			margin-left: 72rpx;
			display: flex;
			align-items: center;


			.imgContent {
				box-sizing: border-box;
				width: 120rpx;
				height: 120rpx;
				overflow: hidden;
				border-radius: 50%;
				

				image {

					width: 100%;
					height: 100%;
				}
			}

			.textContent {
				font-size: 32rpx;
				color: rgba(0, 0, 0, 1);
				margin-left: 30rpx;
				text-align: center;

			}
		}

	.infoFill {
		margin-top: 50rpx;
	
		.inputContent {
			box-sizing: border-box;
			margin-left: 66rpx;
			margin-bottom: 30rpx;
			display: flex;
			align-items: center;
			width: 618rpx;
			height: 88rpx;
			opacity: 1;
			border-radius: 45rpx;
			background: rgba(225, 225, 226, 1.0);
	         
			 .name{
				 width: 80%;
			 }
	
			input {
				margin-left: 50rpx;
				width: 60%;
				background: rgba(225, 225, 226, 1.0);
				font-size: 32rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 46.34rpx;
				color: rgba(0, 0, 0, 1);
			}
			.uni-forms-item{
				margin-left: 22px;
				margin-bottom: 0;
				width: 100%;
				.select-picker-arrow-area{
				display: none;	
				}
			}
			
		}
	}
	
		.confirmIcon {
			box-sizing: border-box;
			margin-top: 60rpx;
			margin-left: 554rpx;

			text-align: center;
			width: 118rpx;
			height: 118rpx;
			border-radius: 50%;

			image {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
	}
</style>